// 引入主题颜色
@import "./theme.scss";
@import "./color.scss";

//单位
$unit: px; 
//是否开启rem计算
$isRem: false; 
//填充-边距
$marginSize: 8; 
@function remPx($Size, $is, $units) {
    @if $is == true {
        @return $Size/16 + $units;
    } @else {
        @return $Size + $units;
    }
}
//引入默认组件样式
@import "./component.scss";
// 定位
.rela {
    position: relative;
}
.abso {
    position: absolute;
}
// 去除标签默认样式
body,
html {
    padding: 0;
    margin: 0;
    color: $font-main;
    font-size: remPx(16, $isRem, $unit);
    width: 100%;
    height: 100%;
    font-family: -apple-system, Helvetica, sans-serif;
    color: $font-main;
}
ul,
li,
dl,
dd {
    list-style: none;
    padding: 0;
    margin: 0;
}
h1,
h2,
h3,
h4 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
}
a {
    text-decoration: none;
    color: $font-main;
}
i {
    font-style: normal;
}
// 边距
@for $i from 1 to 100 {
    @if ($i%2==0) {
        .m-#{$i} {
            margin: remPx($i, $isRem, $unit);
        }
        .m-t-#{$i} {
            margin-top: remPx($i, $isRem, $unit);
        }
        .m-r-#{$i} {
            margin-right: remPx($i, $isRem, $unit);
        }
        .m-b-#{$i} {
            margin-bottom: remPx($i, $isRem, $unit);
        }
        .m-l-#{$i} {
            margin-left: remPx($i, $isRem, $unit);
        }
        .m-lr-#{$i} {
            margin-left: remPx($i, $isRem, $unit);
            margin-right: remPx($i, $isRem, $unit);
        }
        .m-tb-#{$i} {
            margin-bottom: remPx($i, $isRem, $unit);
            margin-top: remPx($i, $isRem, $unit);
        }
        // 填充
        .p-#{$i} {
            padding: remPx($i, $isRem, $unit);
        }
        .p-t-#{$i} {
            padding-top: remPx($i, $isRem, $unit);
        }
        .p-r-#{$i} {
            padding-right: remPx($i, $isRem, $unit);
        }
        .p-b-#{$i} {
            padding-bottom: remPx($i, $isRem, $unit);
        }
        .p-l-#{$i} {
            padding-left: remPx($i, $isRem, $unit);
        }
        .p-lr-#{$i} {
            padding-left: remPx($i, $isRem, $unit);
            padding-right: remPx($i, $isRem, $unit);
        }
        .p-tb-#{$i} {
            padding-top: remPx($i, $isRem, $unit);
            padding-bottom: remPx($i, $isRem, $unit);
        }
    }
}
// 字体
@for $i from 1 to 100 {
    @if ($i%2==0) {
        .font-#{$i} {
            font-size: remPx($i, $isRem, $unit);
        }
    }
}
.font-bold {
    font-weight: bold;
}
// 文本对齐
.font-center {
    text-align: center;
}
.font-right {
    text-align: right;
}
/* 布局 */
.flex {
    display: flex;
}
/* 允许换行 */
.flex-wrap {
    flex-wrap: wrap;
}
/* 垂直排列 */
.flex-column {
    flex-direction: column;
}
// 按比例分配
@for $i from 1 to 13 {
    .flex-#{$i} {
        flex: $i;
    }
}
/* 水平排列 */
/* 左边排列 */
.align-h-left {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
/* 右对齐 */
.align-h-right {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
/* 剧中排列 */
.align-h-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
/* 两端排列 */
.align-h-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
/* 周围空间分布 */
.align-h-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
/* 垂直排列 */
/* 顶部对齐 */
.align-v-top {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
/* 底部对齐 */
.align-v-bottom {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
/* 剧中对齐 */
.align-v-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
$borderArr: ("top", "right", "bottom", "left");
@each $key in $borderArr {
    .border-#{$key} {
        border-#{$key}: 1px solid $border-color;
    }
}
@for $i from 1 to 21 {
    @if ($i%2==0) {
        .border-radius-#{$i} {
            border-radius: remPx($i, $isRem, $unit);
        }
    }
}
